<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定标签属性 v-bind指令</title>
</head>
<style>
    .picOver {
        border: 2px solid #333;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        width: 300px;
        height: auto;
    }
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- <img src="https://n.sinaimg.cn/sinacn20190507ac/12/w1440h972/20190507/38b5-hwsffza5639818.jpg" -->
        <!-- <img src="https://q4.itc.cn/q_70/images03/20240714/6744fcd5750544a09ce9d834bcd8bf13.jpeg"
        width="200px"/> -->
        <img v-bind:src="url" 
        v-bind:title="title"
        width="200px" 
        v-band:class="picOver"
        @mouseover="changeUrlOver"
        @mouseout="changeUrlOut"/>
    </div>
</body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:'Hello Vue!',
            url:"https://q4.itc.cn/q_70/images03/20240714/6744fcd5750544a09ce9d834bcd8bf13.jpeg",
            title:"哈里斯",
            picOver:"",
        },
        methods: {
            //鼠标移入事件
            changeUrlOver(){
                this.url = "https://n.sinaimg.cn/sinacn20190507ac/12/w1440h972/20190507/38b5-hwsffza5639818.jpg",
                this.title="特朗普"
                this.picOver="picOver"
            },
        },
        computed(){
                this.url="https://q4.itc.cn/q_70/images03/20240714/6744fcd5750544a09ce9d834bcd8bf13.jpeg",
                this.title="哈里斯",
                this.picOver="picOver"
        },
    })
</script>